import { useState, useEffect } from 'react';
import { Table, Input, Button, Pagination, message, Space, Row, Col } from 'antd';
import styles from './index.module.scss'
import { configureRunTime, configureModify } from '@/service';
import { useTranslation } from 'react-i18next';
export default (props) => {
    const [messageApi, contextHolder] = message.useMessage();
    const { t, i18n } = useTranslation();
    const initState = () => ({
        limtList: [],
        loading: false
    }),
        [state, setState] = useState(initState);
    const goCofigure = (row) => {
        let param = {
            confEn: row.confEn,
            rate: row.confValue
        }
        configureModify(param).then(response => {
            getLimtFn();
            messageApi.open({
                type: 'success',
                content: response?.message,
            });
        }).catch(e => {
            messageApi.open({
                type: 'error',
                content: e?.message,
            });
        });
    }
    const changeConfigurtion = (id, value) => {
        const updatedData = (state.limtList || []).map(item => {
            if (item.id === id) {
                return { ...item, confValue: value };
            }
            return item;
        });
        setState((o) => ({ ...o, limtList: updatedData || [] }));
    }
    const columns = [
        {
            title: t('menu.minimumConfiguration.table.confName'),
            dataIndex: 'confName',
        },
        {
            title: t('menu.minimumConfiguration.table.configValue'),
            dataIndex: 'configValue',
            render: (_, record, index) => (
                <Space direction="horizontal">
                    <Input
                        value={record.confValue}
                        placeholder={t('menu.minimumConfiguration.table.input.placehoder')}
                        onChange={(e) => changeConfigurtion(record.id, e.target.value)}
                    /><span>min</span>
                </Space>
            ),
        },
        {
            title: t('menu.minimumConfiguration.table.description'),
            dataIndex: 'description',
            width: 400,
        },
        {
            title: t('menu.minimumConfiguration.table.operation'),
            key: '',
            fixed: 'right',
            width: 180,
            render: (text, record, index) => (
                <Space size="middle">
                    <Button type='primary' onClick={() => { goCofigure(record) }}>{t('menu.minimumConfiguration.table.configure')}</Button>
                </Space>
            ),
        },
    ];
    // const handlePageChange = (page) => {
    //     setParams(prevParams => ({ ...prevParams, currentPage: page }));
    // };
    // const handlePageSizeChange = (currentPage, pageSize) => {
    //     setParams(prevParams => ({ ...prevParams, currentPage, pageSize }));
    // };
    const getLimtFn = () => {
        setState(prevState => ({ ...prevState, loading: true }));
        configureRunTime().then(response => {
            setState(o => ({
                ...o,
                limtList: [response?.data] || [],
            }));
            setState(prevState => ({ ...prevState, loading: false }));
        }).catch(e => {
            setState(prevState => ({ ...prevState, loading: false }));
            messageApi.open({
                type: 'error',
                content: e?.message,
            });
        });
    }

    useEffect(() => {
        getLimtFn();
    }, [i18n.language])
    return (
        <div className='page-container'>
            <div className={styles.content}>
                <div className={styles.tableCount}>
                    <Row className={styles.titBlock}>
                        <Col span={12}>
                            <div className='custom-title'>{t('menu.minimumConfiguration.title')}</div>
                        </Col>
                    </Row>
                    <Table loading={state.loading} rowKey={'id'} scroll={{ x: '100%' }} className='custom-table' pagination={false} columns={columns} dataSource={state.limtList} />
                    {/* <div className='custom-Pagination'>
                        <Pagination
                            total={state?.total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={(totalNum) => `Total ${totalNum} items`}
                            align="center"
                            current={params?.currentPage}
                            defaultPageSize={params?.pageSize}
                            onChange={handlePageChange}
                            onShowSizeChange={handlePageSizeChange}
                        />
                    </div> */}
                </div>

            </div>
            {contextHolder}
        </div>
    )
}